<!--人员组成-->
<template>
  <div class="com-container">
    <div class="com-chart" ref="renyuanzucheng_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null, //服务器返回的数据
    };
  },
  props: {
    fenqu: String,
  },
  mounted() {
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(
        this.$refs.renyuanzucheng_ref,
        "chalk"
      );
      const initOption = {
        title: {
          text: "▎ 人员组成",
          left: 20,
          top: 10,
        },
        backgroundColor: "", //设置无背景色
        color: ["#ee6666", "#7ed3f4", "#5c7bd9", "#9ede7f"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          // 距离底部为0%
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255)",
            fontSize: "15",
          },
        },
        series: [
          {
            name: "人员组成",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "45%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "rgba(255,255,255,0.1)",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    async getData() {
      const res = await this.$http.get("/people/people_number", {
        params: {
          area: this.fenqu,
        },
      });
      this.allData = res.data;
      // console.log(this.allData);
      this.updateChart();
    },
    updateChart() {
      const data = this.allData.map((item) => ({
        value: item.number,
        name: item.type,
      }));
      const dataOption = {
        series: [
          {
            data: data,
          },
        ],
      };
      this.chartInstance.setOption(dataOption);
    },
    //饼图的适配
    screenAdapter() {
      const width = this.$refs.renyuanzucheng_ref.offsetWidth;
      const height = this.$refs.renyuanzucheng_ref.offsetHeight;
      const chart = this.chartInstance;
      chart.resize({
        width,
        height,
      });
      const titleFontSize =
        (this.$refs.renyuanzucheng_ref.offsetWidth / 100) * 3.6;
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize * 1.5,
          },
        },
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>